<template>
    <div class="box">
        <el-container>
            <el-header style="height: 540px;">
                <div class="header">
                    <el-row>
                        <el-col>

                        </el-col>
                    </el-row>
                </div>
                <div class="headerImg">
                    <el-row>
                        <el-col>
                            <div class="imgBox">
                                <img src="../assets/images/加入我们/u456.png" style="width: 100%;" alt="">
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-main>
                <el-row style="max-width: 1180px; margin: 0 auto;">
                    <el-col>
                        <div class="Abox" style="background-color: #fff;">
                            <div class="centerText" style="width: 100%;">
                                <el-tabs type="border-card">
                                    <el-tab-pane>
                                        <template slot="label">
                                            <div class="sh" style="font-size: 24px;">校招</div>

                                        </template>
                                        <el-collapse accordion style="padding: 20px 40px;">
                                            <el-collapse-item>
                                                <template slot="title">
                                                    <ul style="display: flex;" class="botList">
                                                        <li>招聘职位</li>
                                                        <li>薪资</li>
                                                        <li>地址</li>
                                                        <li>招聘人</li>
                                                    </ul>
                                                </template>
                                                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </el-tab-pane>
                                    <el-tab-pane>
                                        <template slot="label">
                                            <div class="sh" style="font-size: 24px;">社会招聘</div>

                                        </template>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>
<style>
.box {
    width: 100%;
    height: 1970px;
    background: #f5f5f5;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
}

.header {
    height: 60px;
}

.headerImg {
    width: 100%;
    height: 480px;
}

.imgBox img {
    width: 100%;
    height: 480px;
}

.centerText {
    /* padding: 0 370px; */
    /* height: 666px; */
}

.sh {
    margin-right: 0px;
}

.botList {
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.botList li {
    width: 210px;
    font-size: 18px;
}

.el-collapse-item {
    background: #999;
    text-align: left;
}


.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
}
</style>
<script>
export default {
    data() {
        return {
            activeNames: '1'
        };
    },
    methods: {
        handleChange(val) {
            console.log(val);
        }
    }
}
</script>